<template>
  <!-- 表格主体 -->
  <el-table
    ref="tableRef"
    id="elTable"
    v-bind="$attrs"
    v-loading="loading"
    :data="processTableData"
    :border="border"
    :stripe="stripe"
    :row-key="rowKey"
    :show-overflow-tooltip="true"
    @selection-change="selectionChange"
    :height="tableHeight"
  >
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 复选框 -->
    <el-table-column v-if="showCheckout" type="selection" width="40" />
    <!-- 序号 -->
    <el-table-column v-if="showNo" type="index" label="序号" width="108" :align="'center'">
      <!-- 根据分页判断序号 -->
      <template #default="scope">
        <span v-if="pagination">
          {{ scope.$index + (pageable.pageNum - 1) * pageable.pageSize + 1 }}
        </span>
        <span v-else>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>

    <!-- 表格列渲染 -->
    <template v-for="item in columns" :key="item.prop + item.label">
      <!-- 判断是否为slot -->
      <el-table-column
        v-if="item.type === 'slot'"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed"
        :align="item.align ?? 'center'"
      >
        <!-- 具名插槽 -->
        <template #default="scope">
          <!-- {{ scope.row }} -->
          <slot :name="item.slot_name" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        v-bind="item"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed"
        :align="item.align ?? 'center'"
        :reserve-selection="item.type === 'selection'"
      >
      </el-table-column>
      <!-- v-if="item.type === 'selection' || item.type === 'index'" -->
    </template>

    <!-- 插入表格最后一行之后的插槽 -->
    <template #append>
      <slot name="append"> </slot>
    </template>

    <!-- 表格无数据情况 -->
    <template #empty>
      <div class="table-empty">
        <slot name="empty">
          <img src="@/assets/images/notData.png" alt="notData" />
          <div>暂无数据</div>
        </slot>
      </div>
    </template>
  </el-table>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  // 表体数据--key为columns中prop的值
  processTableData: {
    type: [Array, null],
    default: () => {
      return [
        // 示例数据
        // { userName: '111', content: '222', status: '333' },
        // { userName: '111', content: '222', status: '333' },
        // { userName: '123', content: '222', status: '333' },
        // { userName: '111', content: '222', status: '333' },
        // { userName: '111', content: '222', status: '333' }
      ]
    }
  },
  // 表头数据  prop为表体data的key值
  columns: {
    type: Array,
    default: () => {
      return [
        // 示例数据
        // { type: 'selection', label: 'selection', width: '60' },
        // { type: 'index', label: '序号', width: '60' },
        // { prop: 'userName', label: '姓名' },
        // { prop: 'content', label: '内容' },
        // { prop: 'status', label: '状态' },
        // { prop: 'operation', label: '操作' }
      ]
    }
  },
  // 是否显示复选框
  showCheckout: {
    type: Boolean,
    default: false
  },
  // 是否默认显示序号--为true则不需要在tableColumns添加序号列
  showNo: {
    type: Boolean,
    default: false
  },
  // 是否带有纵向边框
  border: {
    type: Boolean,
    default: true
  },
  // 是否为斑马纹table
  stripe: {
    type: Boolean,
    default: false
  },
  rowKey: {
    type: String,
    default: 'id'
  }
})
</script>

<style lang="scss" scoped>
// 解决表格数据为空时样式不居中问题(仅在element-plus中)
:deep(.el-table__empty-block) {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 10%);
  .table-empty {
    line-height: 120px;
  }
}
</style>
